<template>
  <div class="myContainer">
    <!-- 头部标题 start -->  
    <el-row class="myHeadeTitle">
      <el-col :span="24" class="myPadding_20px">
        <img src="static/images/wbStep4.png" alt="" title=""/>
      </el-col>
    </el-row>
    <!-- 头部标题 end -->
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        计划名称 :
      </el-col>
      <el-col :span="8">
        <el-input placeholder="计划名称" :disabled="disabled"></el-input>
      </el-col>
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        计划状态 :
      </el-col>
      <el-col :span="4" class="myLineHeight_45px">
        <template>
          <el-radio-group v-model="on" :disabled="disabled">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="2">禁用</el-radio>
          </el-radio-group>
        </template>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        计划ID :
      </el-col>
      <el-col :span="8">
        <el-input placeholder="计划ID" :disabled="disabled"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        计划所属小区 :
      </el-col>
      <el-col :span="8">
        <el-input placeholder="计划所属小区" :disabled="disabled"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        计划模板及巡检对象 :
      </el-col>
      <el-col :span="15">
        <template>
          <el-table
            :data="tableDataList"
            border
            style="width: 100%">
            </el-table-column>
            <el-table-column
              prop="id"
              label="巡检计划模板">
            </el-table-column>
            <el-table-column
              prop="id"
              label="巡检对象">
            </el-table-column>
          </el-table>
        </template>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        计划周期 :
      </el-col>
      <el-col :span="8">
        <el-input placeholder="计划周期" :disabled="disabled"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        计划负责人 :
      </el-col>
      <el-col :span="8">
        <el-input placeholder="计划负责人" :disabled="disabled" @focus="newPersonnelDialogVisible=true"></el-input>
      </el-col>
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        联系电话 :
      </el-col>
      <el-col :span="8">
        <el-input placeholder="联系电话" :disabled="disabled"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        计划执行人 :
      </el-col>
      <el-col :span="8">
        <el-input placeholder="计划检查人" :disabled="disabled" @focus="newPersonnelDialogVisible=true"></el-input>
      </el-col>
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        联系电话 :
      </el-col>
      <el-col :span="8">
        <el-input placeholder="联系电话" :disabled="disabled"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="15" :offset="3">
        <el-button type="primary" class="myBgGreen" @click="onClose">关闭</el-button>
      </el-col>
    </el-row>



    <!--选择人员弹出框 start-->
    <el-dialog title="选择人员" class="myRoleDialog" :visible.sync="newPersonnelDialogVisible" >
      <el-form :inline="true" >
        <el-form-item>
          <el-input v-model="searchKW" class="myDialogSearchText" placeholder="输入关键字进行搜索"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="myBgGreen">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-menu class="mymarginTop_10px"><!-- :default-openeds="['1','1-1']"-->
        <el-menu-item index="1">张三</el-menu-item>
        <el-menu-item index="2">李四</el-menu-item>
        <el-menu-item index="3">王五</el-menu-item>
      </el-menu>
      <div slot="footer">
        <el-button type="primary" class="myBgGreen" @click="newPersonnelDialogVisible = false">取 消</el-button>
        <el-button type="primary" class="myBgGreen" @click="newPersonnelDialogVisible = false">提 交</el-button>
      </div>
    </el-dialog>
    <!--选择人员弹出框 end-->
  </div>
</template>

<style scoped>
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myHeadeTitle{
    color: #000;
    font-weight: 500;
    font-size: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dbdbdb;
    margin-bottom:10px; 
  }
  .myHeadeTitle:before,.myHeadeTitle:after{
    content: " ";
    display: block;
    clear: both;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top: 2px;
  }
  .myLineHeight_35px{
    line-height: 35px;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myPaddingTop_10px{
    padding-top: 10px;
  }  
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
    padding-right: 10px;
  }
  .myPaddingBottom_10px{
    padding-bottom: 10px;
  }
  .myVA_M{
    vertical-align: middle;
  }
  .myPadding_20px{
    padding: 20px;
  }
  .myDialogSearchText{
    width: 360px;
  }
  .myLineHeight_45px{
    line-height: 45px;    
  }
</style>

<script>

  
  export default {
    data(){
      return{
        on:1,
        newPersonnelDialogVisible:false,
        searchKW:"",
        startDateValue:"",
        endDateValue:"",
        lastStartDateValue:"",
        lastEndDateValue:"",
        disabled:true,
        tableDataList:[]
      }
    },
    components: {
        
    },
    mounted(){
      document.title = '日常巡检管理';
      
    },
    methods:{     
      onClose:function(){
        this.$router.push({
          path:'/xjjhgl',
          query: {}
        })
      }
      

    }
  
  }


</script>



